<template>
  <div class="module">
    <div class="filter-container">
      <el-tooltip
        class="item"
        effect="dark"
        content="请选择内容源"
        placement="top"
      >
        <el-select
          clearable
          v-model="listQuery.sourceType"
          placeholder="内容源"
        >
          <el-option
            v-for="item in sourceTypeOptions"
            :key="item.id"
            :label="item.text"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-tooltip>

      <el-date-picker
        v-model="daterangeValue"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="起始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd"
        @change="daterangeChanged"
        :picker-options="daterangePickerOptions"
      >
      </el-date-picker>
      <el-button type="primary" @click="handleFilter">查询</el-button>
      <el-button type="warning" @click="resetFilter">重置</el-button>
    </div>

    <div class="title">总计</div>
    <div class="data">
      <el-table :data="exStaInfo" border>
        <el-table-column align="center" label="总数">
          <template slot-scope="scope">
            <span>{{ scope.row.total }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="有图数量">
          <template slot-scope="scope">
            <span>{{ scope.row.hasPic }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="无图数量">
          <template slot-scope="scope">
            <span>{{ scope.row.noPic }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="来源">
          <template slot-scope="scope">
            <span>{{ scope.row.sourceType | sourceTypeFilter }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="title flex">
      <span>详细列表</span>
      <!--<el-button type="primary" @click="downloadPage('withdrawTable')">导出</el-button>-->
    </div>

    <div class="data">
      <el-table
        :data="list"
        border
        fit
        highlight-current-row
        v-loading="listLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        @sort-change="sortChange"
        ref="sort"
      >
        <el-table-column align="center" label="日期" prop="targetDate">
          <template slot-scope="scope">
            <span>{{
              (scope.row.targetDate / 1000) | parseTime("{y}-{m}-{d}")
            }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="总数">
          <template slot-scope="scope">
            <span>{{ scope.row.total }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="有图数量">
          <template slot-scope="scope">
            <span>{{ scope.row.hasPic }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="无图数量" prop="noPic">
          <template slot-scope="scope">
            <span>{{ scope.row.noPic }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="来源" prop="sourceType">
          <template slot-scope="scope">
            <span>{{ scope.row.sourceType | sourceTypeFilter }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="分类">
          <template slot-scope="scope">
            <span>{{ scope.row.subType }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <TablePagination
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      :current-page="listQuery.page"
      :limit="listQuery.limit"
      :total="total"
      :loading="listLoading"
    >
    </TablePagination>

    <el-dialog
      :visible.sync="playerInfoDetailVisible"
      :show-close="true"
      close-on-click-modal
      class="player-info-detail"
    >
      <player-info-detail :accountId="currentUserId"></player-info-detail>
    </el-dialog>
  </div>
</template>

<script>
import DATEPICKER_OPTIONS from "@/config/datepickerOptions";
import TablePagination from "@/components/TablePagination";

export default {
  name: "statisticsList",
  components: { TablePagination },
  data() {
    return {
      list: null,
      total: null,
      listLoading: true,
      exStaInfo: [],
      listQuery: {
        offset: 0,
        limit: 50,
        startTime: null,
        endTime: null,
        orderBy: "createAt",
        orderType: "desc"
      },
      daterangePickerOptions: DATEPICKER_OPTIONS.daterangePickerOptions,
      daterangeValue: [],
      sourceTypeOptions: [
        { id: 0, text: "微博" },
        { id: 1, text: "即刻" },
        { id: 2, text: "微博精选" },
        { id: 3, text: "飞爪抖音" }
      ],
      subtypeOptions: [{ id: "", text: "" }],
      dialogFormVisible: false,
      dialogImgSrc: ""
    };
  },
  filters: {
    sourceTypeFilter(id) {
      const sourceMap = {
        0: "微博",
        1: "即刻",
        2: "微博精选",
        3: "飞爪抖音"
      };
      return sourceMap[id];
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      this.$get("ContentDelivery/quality", this.listQuery).then(resp => {
        this.list = resp.data.items;
        this.total = resp.data.count;
        this.exStaInfo = resp.data.total;
        this.listLoading = false;
      });
    },
    sortChange(obj) {
      this.listQuery.orderBy = obj.prop;
      this.listQuery.orderType = obj.order == "ascending" ? "asc" : "desc";
      this.getList();
    }
  }
};
</script>
<style lang="scss">
.module {
  padding: 0 20px 20px;
  background: #f4f5f6;
  h2 {
    margin: 0;
    padding: 20px 20px 0;
  }
  .title {
    font-weight: bold;
    font-size: 18px;
    padding: 20px 20px 0;
    &.flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  .filter-container {
  }
  .data {
    padding: 20px 20px;
    .el-pagination {
      padding-left: 0;
    }
    &.flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .flex-item {
      width: 48%;
      border-radius: 5px;
      background: #ffffff;
      p {
        text-align: center;
      }
    }
  }
}
</style>
